/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      article_content
 * @Description:    文章内容
 * @Author:         SuPeiSen
 * @CreateDate:     2021/2/3 11:48 下午
 * @UpdateDate:     2021/2/3 11:48 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import { IRouteComponentProps } from 'umi';
import { Tooltip, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { HttpStatus } from '@/utils/requests';
import { BlogGetArticleApi } from '@/service/blog/blog_article_api';
import { BlogArticleItemType } from '@/type/blog/blog_article_type';
import { articleContentImage, openUrl } from '@/utils/app_fun';
import { useViewport } from '@/provider/viewport_context';
import { BG_COLOR, IPAD_WIDTH } from '@/config/define';
import './style/article_content.less';
import './style/article_bottom.less';
import './phone_style/phone_article_content.less';
import { LoadingWidget } from '@/widget/loading_wdiget/loading_widget';
import { ShowLintAdText } from '@/pages/blog/ad/ad';
import {
  BlogGetMessageListApi,
  BlogSentMessageApi,
} from '@/service/blog/blog_message_api';
import { BlogMessageItemType } from '@/type/blog/message_type';
import { MessageListWidget } from '@/widget/message_widget/message_widget';
import { MessageInputWidget } from '@/widget/message_input_widget/message_input_widget';
import { ShowAdWidget } from '@/widget/show_ad_widget/show_ad_widget';
import { ErrorWidget404 } from '@/widget/error_widget/404_widget';

export default (props: IRouteComponentProps<{}, { id: string }>) => {
  // 屏幕宽度
  const { width, type } = useViewport();

  // 参数
  const query = props.location.query;
  // 请求状态
  const [status, setStatus] = useState<HttpStatus>(HttpStatus.loading);
  // 不同端的width不一样
  const widthValue = width <= IPAD_WIDTH ? '90%' : '100%';

  // 保存文章详情
  const [articleContent, setArticleContent] = useState<BlogArticleItemType>();
  // 保存文章留言列表
  const [articleMessageList, setArticleMessageList] = useState<
    Array<BlogMessageItemType> | undefined
  >(undefined);

  // 获取文章
  useEffect(() => {
    BlogGetArticleApi(Number(props.location.query.id)).then((model) => {
      if (model.success) {
        document.title = model.data?.data?.article_title ?? '';
        setArticleContent(model.data!.data);
        setStatus(HttpStatus.success);
      } else {
        setStatus(HttpStatus.error);
      }
    });
  }, [query.id]);

  // 获取留言
  useEffect(() => {
    setArticleMessageList(undefined);
    BlogGetMessageListApi(Number(query.id)).then((model) => {
      if (model.success) {
        // const lists = model.data!.data
        setArticleMessageList(model.data!.data);
      }
    });
  }, [query.id]);

  useEffect(() => {
    require('@/static/src/prism/prism');
    require('@/static/src/prism/prism.css');
    // @ts-ignore
    Prism.highlightAll();
  });

  // loading
  if (status === HttpStatus.loading) {
    return <LoadingWidget />;
  }

  // 请求失败
  if (status === HttpStatus.error) {
    return <ErrorWidget404 />;
  }

  // 提交留言
  const submitMessage = (
    userName: string,
    userEmail: string,
    content: string,
    userSex: number,
  ) => {
    BlogSentMessageApi({
      user_name: userName,
      user_email: userEmail,
      message_content: content,
      article_id: query.id,
      user_sex: userSex,
    }).then((model) => {
      if (model.success) {
        message.success('留言成功');
      } else {
        message.error(model.msg);
      }
    });
  };

  return (
    <div className="article_content_main">
      {/*标题*/}
      <div
        className="article_content_title"
        style={{ marginTop: type === 'phone' ? '25px' : '' }}
      >
        {articleContent!.article_title}
      </div>

      {/*文章信息*/}
      <div className="article_content_info">
        添加时间：<span>{articleContent?.add_time}</span>
        <div style={{ width: '2%' }} />
        阅读次数：<span>{articleContent?.article_read}</span>
      </div>
      {/*更新时间*/}
      <div className="article_content_info">
        <span style={{ color: 'red', fontWeight: 'lighter' }}>
          最近更新时间
        </span>
        ：<span>{articleContent?.update_time}</span>
      </div>

      {/*简介*/}
      <div
        style={{ margin: type === 'phone' ? '2% 5%' : '2% 0' }}
        className={'article_content_consult_synopsis'}
      >
        <span>{articleContent?.article_synopsis ?? ''}</span>
      </div>

      {/*参考链接*/}
      <div
        className="article_content_consult"
        style={{ margin: type === 'phone' ? '0 5%' : '0' }}
        hidden={articleContent!.article_consult.length === 0}
      >
        {articleContent!.article_consult.map((item, index) => {
          return (
            <div
              className="article_content_consult_item"
              key={item.consultUrl}
              onClick={() => openUrl(item.consultUrl)}
            >
              <span>参考链接{index + 1}：</span>
              <Tooltip title={item.consultUrl}>
                <span className="article_content_consult_item_url">
                  {item.consultName}
                </span>
              </Tooltip>
            </div>
          );
        })}
      </div>

      {/*富文本*/}
      <div
        style={{ width: widthValue }}
        className={'article_content_html'}
        dangerouslySetInnerHTML={{
          __html: articleContentImage(articleContent!.article_content),
        }}
      />

      {/*广告*/}
      <div hidden={type === 'pc'}>
        <ShowLintAdText text="广告" bgColor={BG_COLOR} />
        <ShowAdWidget />
      </div>

      {/*留言*/}
      <div>
        <ShowLintAdText text="留言" bgColor={BG_COLOR} />
        <div className="article_content_message_input">
          <MessageInputWidget onClickBtn={submitMessage} />
        </div>
      </div>

      {/*留言板*/}
      <div>
        <ShowLintAdText text="留言板" bgColor={BG_COLOR} />
        <MessageListWidget messageList={articleMessageList} />
      </div>
    </div>
  );
};
